<template>
  <span class="ali-icon" v-if="prefix.includes('icon-')" v-bind="$attrs">
    <i :class="['iconfont', `${iconModel.modelValue}`]"></i>
  </span>
  <el-icon :size="16" v-if="iconModel.modelValue && prefix.includes('ele-')" v-bind="$attrs">
    <component :is="iconModel.modelValue.replace('ele-', '')"></component>
  </el-icon>
</template>

<script setup lang="ts">
defineOptions({
  name: "IconView"
});
const iconModel = defineProps({
  modelValue: {
    type: String,
    default: ""
  }
});

const prefix = computed(() => {
  return iconModel.modelValue ? (iconModel.modelValue.startsWith("icon-") ? "icon-" : "ele-") : "";
});
</script>

<style scoped lang="scss"></style>
